<template>
  <q-page class="index-page bg-grey-1">
    <!-- 英雄区域 -->
    <div class="hero-section bg-primary text-white q-pa-xl">
      <div class="container">
        <div class="row items-center">
          <div class="col-md-6">
            <h1 class="text-h2 text-weight-bold q-mb-md">欢迎使用管理系统</h1>
            <p class="text-h6 q-mb-lg">高效、安全、易用的企业级管理平台</p>
            <div class="q-gutter-sm">
              <q-btn
                color="white"
                text-color="primary"
                label="开始使用"
                to="/dashboard"
                size="lg"
              />
              <q-btn outline color="white" label="了解更多" size="lg" />
            </div>
          </div>
          <div class="col-md-6 text-center">
            <q-img src="~assets/hero-image.svg" style="max-width: 500px" />
          </div>
        </div>
      </div>
    </div>

    <!-- 特性介绍 -->
    <div class="features-section q-pa-xl">
      <div class="container">
        <h2 class="text-h4 text-center text-weight-bold q-mb-xl">系统特性</h2>
        <div class="row q-col-gutter-xl">
          <div class="col-md-4" v-for="(feature, index) in features" :key="index">
            <q-card class="feature-card q-pa-md">
              <q-icon :name="feature.icon" size="xl" :color="feature.color" class="q-mb-md" />
              <h3 class="text-h6 text-weight-bold">{{ feature.title }}</h3>
              <p class="text-grey-8">{{ feature.description }}</p>
            </q-card>
          </div>
        </div>
      </div>
    </div>

    <!-- 快速入口 -->
    <div class="quick-access bg-grey-2 q-pa-xl">
      <div class="container">
        <h2 class="text-h4 text-center text-weight-bold q-mb-xl">快速入口</h2>
        <div class="row justify-center q-gutter-md">
          <q-btn
            v-for="(action, index) in quickActions"
            :key="index"
            :color="action.color"
            :icon="action.icon"
            :label="action.label"
            :to="action.to"
            size="lg"
            class="q-px-xl"
          />
        </div>
      </div>
    </div>
  </q-page>
</template>

<script setup>
const features = [
  {
    title: '数据可视化',
    description: '直观的图表展示，帮助您快速了解业务状况',
    icon: 'insights',
    color: 'primary',
  },
  {
    title: '权限管理',
    description: '精细化的权限控制，保障系统安全',
    icon: 'lock',
    color: 'red',
  },
  {
    title: '高效操作',
    description: '简洁的界面设计，提升工作效率',
    icon: 'bolt',
    color: 'orange',
  },
]

const quickActions = [
  {
    label: '进入仪表盘',
    icon: 'dashboard',
    color: 'primary',
    to: '/dashboard',
  },
  {
    label: '用户管理',
    icon: 'people',
    color: 'teal',
    to: '/system/user',
  },
  {
    label: '系统设置',
    icon: 'settings',
    color: 'grey-8',
    to: '/system/config',
  },
]
</script>

<style lang="scss">
.index-page {
  .hero-section {
    min-height: 70vh;
    display: flex;
    align-items: center;
  }

  .feature-card {
    height: 100%;
    transition: transform 0.3s ease;

    &:hover {
      transform: translateY(-5px);
    }
  }

  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
  }
}
</style>
